<template>
  <div>
    <mt-header title="我的收藏">
      <mt-button icon="back" slot="left" @click="gobackIDcardClean">返回</mt-button>
    </mt-header>
    <tab :line-width="2" animate active-color="#5f2500" style="font-weight:bold;">
      <tab-item :selected="selectCol" @on-item-click="onItemClick(myArticle)">我的文章</tab-item>
      <tab-item :selected="!selectCol" @on-item-click="onItemClick(myVideo)">我的视频</tab-item>
    </tab>
    <!--子组件,is 特性动态绑定子组件,keep-alive将切换出去的组件保留在内存中 -->
    <prince :is="currentView" keep-alive></prince>
  </div>
</template>

<script>
  import {
    Tab,
    TabItem,
    ButtonTab,
    ButtonTabItem,
    LoadMore,
    Divider,
    Checklist
  } from "vux";
  import myArticle from './myArticle';
  import myVideo from './myVideo';
  import _ from 'lodash';

  export default {
    components: {
      Tab,
      TabItem,
      ButtonTab,
      ButtonTabItem,
      LoadMore,
      Divider,
      Checklist,
      myArticle,
      myVideo,
    },

    methods: {
      //切换Tab
      onItemClick(tabItem) {
        console.log('tabItem', tabItem);
        sessionStorage.setItem('tabItem', tabItem);
        this.currentView = tabItem;
      },
      //返回清除数据
      gobackIDcardClean: function () {
        sessionStorage.removeItem('tabItem');
        sessionStorage.removeItem('subjectItem');
        this.$router.push({
          path: '/IDcard'
        })
      }
    },
    data() {
      return {
        myArticle: 'myArticle',
        myVideo: 'myVideo',
        currentView: 'myArticle',
        stlle: 'myArticle',
        selectCol: true
      };
    },
    mounted() {
      //状态保存
      if (sessionStorage.getItem('tabItem') == 'myArticle') {
        this.currentView = sessionStorage.getItem('tabItem');
        this.selectCol = true;
      } else if ((sessionStorage.getItem('tabItem') == 'myVideo')) {
        this.currentView = sessionStorage.getItem('tabItem');
        this.selectCol = false;
      }
      let windowWidth = document.documentElement.clientWidth; //获取屏幕高度
      if (windowWidth > 768) {
        //这里根据自己的实际情况设置容器的高度
        this.wrapperHeight = document.documentElement.clientHeight - 130;
      } else {
        this.wrapperHeight = document.documentElement.clientHeight - 90;
      }



    }
  };

</script>
